<!doctype html>

<html lang="en">
	<head>
	    <meta charset="utf-8" />
	    <title>impress demo</title>
	    <link href="css/impress-demo.css" rel="stylesheet" />
	    <style>
	    .square{
	    	height:400px;
	    	width:400px;
	    }
	    </style>
	</head>   
	
	<body class="impress-not-supported">
	
		<div class="fallback-message">
		    <p>尊驾的浏览器太老土啦！<b>无法满足impress.js的要求</b>，现在你只能看到一些最朴素的演示画面。</p>
		    <p>为了欣赏漂亮的演示画面，请使用先进、优雅、快速、美丽、免费的现代浏览器，比如 <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> 。</p>
		</div>
		
		<div id="impress">
		
		    <div id="1" class="step slide square" data-x="200" data-y="200" data-z="0">
		        1
		    </div>
		    
		    <div id="2" class="step slide square" data-x="0" data-y="200" data-z="200" data-rotate-y="90">
		        2
		    </div>
		    
		    <div id="3" class="step slide square" data-x="200" data-y="0" data-z="200" data-rotate-x="90">
		        3
		    </div>
		    
		    <div id="4" class="step slide square" data-x="400" data-y="200" data-z="200" data-rotate-y="90">
		        4
		    </div>
		    
		    <div id="5" class="step slide square" data-x="200" data-y="200" data-z="400">
		        5
		    </div>
		    
		    <div id="3" class="step slide square" data-x="200" data-y="400" data-z="200" data-rotate-x="90">
		        6
		    </div>
		    
		    <div id="overview" class="step" data-x="1000" data-y="100" data-scale="10">
   			</div>
		    
		</div>
		
		<div class="hint">
		    <p>使用空格或者方向键来移动</p>
		</div>
		<script>
		if ("ontouchstart" in document.documentElement) { 
		    document.querySelector(".hint").innerHTML = "<p>向左或向右拖动屏幕来移动</p>";
		}
		</script>
		
		<script src="js/impress.js"></script>
		<script>impress().init();</script>
	
	</body>
</html>